import React, { Component } from 'react'

export class TodoHeader extends Component {
    state = {
        content:''
    }
    render() {
        return (
        <div>
            <header className="header">
                <h1>todos</h1>
                <input
                value={this.state.content}
                onChange={this.cgAddItemInfo}
                onKeyUp={this.cgAddItem}
                className="new-todo"
                placeholder="What needs to be done?"
                autoFocus
                />
            </header>
        </div>)
    }

    cgAddItemInfo = (e) => {
        this.setState({
            content:e.target.value
        })
        
    }

    cgAddItem = (e) => {
        if(e.keyCode === 13) {
            this.props.cgAddItemById(this.state.content)
            this.setState({
                content:''
            })
        }
        
    }
}

export default TodoHeader